<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<u-sticky bgColor="#fff" :offsetTop="appType=='h5'?0:navHeight">
			<view style="box-shadow: 0 3px 3px #dedede;width: 100%;" v-if="tabs.length>1">
				<u-tabs :list="tabs" @click="tabsClick" :lineColor="app_color" lineWidth="60"></u-tabs>
			</view>
		</u-sticky>
		<u-list @scrolltolower="scrolltolower">
			<view class="view-box-1" v-if="showType==1">
				<view class="view-list" v-for="list in data" @click="content(list.id)">
					<view class="list-img" v-if="list.img.length">
						<u--image :src="list.img" width="100" height="70"></u--image>
					</view>
					<view class="list-content" style="height: 70px;">
						<view>
							<view class="u-line-2 content-title">{{list.title}}</view>
							<text v-if="list.desc.length" class="u-line-1"
								style="font-size: 11px;color: #ab9251;">{{list.desc}}</text>
						</view>
						<view class="content-bottom">
							<text>发布时间：{{list.time}}</text>
							<view style="display: flex;flex-direction: row;margin-right: 5px;;">
								<u-icon name="eye-fill" size="11" color="#909090" style="margin-right: 5px;"></u-icon>
								<text style="font-size: 11px;">{{list.view}}</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="view-box-2" v-if="showType==2">
				<view class="view-list" v-for="list in data" @click="content(list.id)">
					<u--image :src="list.img" width="350rpx" height="350rpx"></u--image>
					<text class="u-line-1" style="font-size: 13px;color: #333;margin: 3px;">{{list.title}}</text>
					<view style="margin: 3px;display: flex;flex-direction: row;justify-content: space-between;">
						<text style="font-size: 11px;color: #666">{{list.time}}</text>
						<view style="display: flex;flex-direction: row;">
							<view>
								<u-icon name="eye-fill" size="11" color="#909090"></u-icon>
							</view>
							<view style="font-size: 11px;color: #666;margin-left: 10px;">{{list.view}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="!hasMore" text="没有更多内容..." iconSize="0"></u-empty>
		</u-list>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showType: 1,
				tabs: [],
				hasMore: true,
				info: {
					column: [],
					page: 1,
					page_num: 10,
					top_column_id: 0,
					search: ""
				},
				data: []
			}
		},
		onLoad() {
			if (this.param.column) {
				this.info.column = JSON.parse(this.param.column);
				this.info.top_column_id = this.info.column[0]
			}
			if (this.param.show_type) {
				this.showType = this.param.show_type;
			}
			if (this.param.search) {
				this.info.search = this.param.search;
			}
			this.get();
		},
		methods: {
			scc(e) {
				console.log(12345);
			},
			content(id) {
				// console.log('id ==>', id);
				this.navto('pages/index/content?id=' + id)
			},
			tabsClick(e) {
				this.info.top_column_id = e.value;

				this.data = [];
				this.info.page = 1;
				this.hasMore = true;
				this.get(1);
			},
			get: function(page) {
				if (!this.hasMore) {
					return false;
				}
				if (page) {
					this.info.page = page;
				}
				let self = this;
				this.moxiPost("/index/app/get_content_list", this.info, function(data) {
					console.log(data);
					if (data.data.allpage <= self.info.page) {
						self.hasMore = false;
					}
					if (!self.tabs.length) {
						if (data.data.column && data.data.column.length) {
							self.tabs = data.data.column;
						}
					}
					if (data.data.data) {
						for (let k in data.data.data) {
							data.data.data[k].time = uni.$u.timeFormat(data.data.data[k].time, 'yyyy-mm-dd');
							self.data.push(data.data.data[k])
						}
					}

				})
			},
			scrolltolower() {
				if (this.hasMore) {
					this.info.page++;
					this.get();
				}
			}
		}
	}
</script>

<style lang="scss">
	.view-box-1 {
		display: flex;
		flex-direction: column;

		.view-list {
			display: flex;
			flex-direction: row;
			border-bottom: 1px #eee solid;
			padding: 10px;
		}

		.list-img {
			margin-right: 10px;
			width: 100px;
			height: 70px;
		}

		.list-content {
			display: flex;
			;
			flex-direction: column;
			justify-content: space-between;
			flex-grow: 1;
		}

		.list-content .content-title {
			color: #333;
			font-size: 15px;
		}

		.content-bottom {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}

		.content-bottom text {
			font-size: 12px;
			color: #666
		}
	}


	.view-box-2 {
		display: flex;
		flex-direction: row;
		flex: 1 1 50%;
		flex-wrap: wrap;
		justify-content: space-between;

		.view-list {
			margin: 20rpx 10rpx;
			width: 350rpx;
			display: flex;
			flex-direction: column;
			box-shadow: 0 0 5px #ccc;
			border-radius: 4px;
			overflow: hidden;
		}

	}
</style>